<%--
  Created by IntelliJ IDEA.
  User: meng
  Date: 2020/5/10
  Time: 11:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path = request.getContextPath();%>
<html>
<head>
    <title>上传头像</title>
    <style>
        #backHome{width: 60px;margin-right: 50px;}
        #touXiang{margin-left: 450px;margin-top: 5px;}
        #show{margin-left: 50px;margin-top: 50px;}
        #file{ opacity: 0;}
        #xuanZe{background-color:#86cfda;color: white; float: left;margin-left: 60px;margin-top: 10px}
    </style>
</head>
<body>
<div id="touXiang">
<a href="<%=path%>/web/index" title="返回首页">
    <img src="${pageContext.servletContext.contextPath}/static/images/web/backHome.png" id="backHome">
</a>

<%--=============================================--%>

    <form class="" enctype="multipart/form-data" method="post" action="${pageContext.servletContext.contextPath}/web/person/personPicUpLoad">
        <div class="user_pic" style="margin: 10px;">
            <c:if test="${sessionScope.person.pic==0}">
                <img src="<%=path%>/static/images/web/uploadimages/0.jpeg" id="show" width="350">
            </c:if>
            <c:if test="${sessionScope.person.pic!=0}">
            <img src="<%=path%>/static/images/web/uploadimages/${sessionScope.person.pic}" id="show" width="350">
            </c:if>
        </div>
        <input type="hidden" name="personId" value="${sessionScope.person.id}">
        <input onchange="changepic(this)" class="filepath" id="file" name="personPic" type="file" accept="image/png, image/jpeg, image/gif, image/jpg">
        <label for="file" class='btn btn-success' id="xuanZe">选择一个图片</label>
        <input type="submit" value="上传" style="margin-top: 10px;">
    </form>

<%--=============================================--%>
</div>
</body>
<%--<script src="<%=path%>/static/js/web/upHead/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>--%>
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    //简易的验证  大小 格式
    $('#file').on('change', function(e) {
        var filemaxsize = 1024 * 3;//3M
        var target = $(e.target);
        var Size = target[0].files[0].size / 1024;
        if(Size > filemaxsize) {
            alert('图片过大，请重新选择!');
            return false;
        }
        if(!this.files[0].type.match(/image.*/)) {
            alert('请选择正确的图片!')
        } else {
            var filename = document.querySelector("#avatar-name");
            var texts = document.querySelector("#file").value;
            var teststr = texts; //你这里的路径写错了
            testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
            filename.innerHTML = testend;
        }

    });
    function changepic(obj) {
        //console.log(obj.files[0]);//这里可以获取上传文件的name
        var newsrc=getObjectURL(obj.files[0]);
        document.getElementById('show').src=newsrc;
    }
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>
</html>
